$sides: (
        "": "",
        "t": "top",
        "b": "bottom",
        "l": "left",
        "r": "right",
);

$breakpoints: (
        "": "",
        "xs": 576px,
        "sm": 768px,
        "md": 992px,
        "lg": 1200px,
);

@each $breakName, $breakValue in $breakpoints {
  @each $sideName, $sideValue in $sides {
    @for $i from 0 through 15 {

      $property: if($sideName == '', '', -#{$sideValue});
      $space: $i;
      $selector: '';

      @if $breakName != "" {
        $selector: #{$sideName}-#{$breakName}-#{$i};
      } @else {
        $selector: #{$sideName}-#{$i};
      }

      @if $breakName != "" {
        @media (min-width: $breakValue) {
          .m#{$selector} {
            margin#{$property}: #{$space}rem;
          }

          .p#{$selector} {
            padding#{$property}: #{$space}rem;
          }
        }
      } @else {
        .m#{$selector} {
          margin#{$property}: #{$space}rem;
        }

        .p#{$selector} {
          padding#{$property}: #{$space}rem;
        }
      }
    }
  }
}